<template>
  <h4 class="title_lv2">DatePicker 日期选择器</h4>
  <div class="statement">
    <ol>
      <li>用于选择或输入日期</li>
    </ol>
  </div>

  <div class="hr das"></div>

  <h4 class="title_lv2">选择某一天</h4>
  <div class="statement">
    <ol>
      <li>以”日“为基本单位，基础的日期选择控件</li>
      <li>基本单位由 type 属性指定。 通过 shortcuts 配置快捷选项， 通过 disabledDate 函数，来设置禁用掉的日期。</li>
      <li>size 为控制组件大小</li>
    </ol>
  </div>

  <!-- 页面代码-->
  <div>
    <div class="">
      <el-date-picker v-model="value1" type="date" placeholder="Pick a day" />
      <div>{{ value1 }}</div>
    </div>
  </div>
  <!-- 页面代码 -->

  <!-- 页面代码 源码 -->
  <dropWrap key="oreo">
    <pre><code class="language-js">{{ htm }} </code></pre>
  </dropWrap>
  <!-- 页面代码 源码 -->

  <div class="hr das"></div>

  <h4 class="title_lv2">选择某日期范围</h4>
  <div class="statement">
    <ol>
      <li>在选择日期范围时，你可以指定起始日期和结束日期的默认时间。</li>
      <li>默认情况下，开始日期和结束日期的时间部分都是选择日期当日的 00:00:00</li>
      <li>default-time 可以分别指定开始日期和结束日期的具体时刻。</li>
    </ol>
  </div>

  <!-- 页面代码-->
  <div>
    <div class="">
      <el-date-picker
        v-model="value"
        type="daterange"
        start-placeholder="Start date"
        end-placeholder="End date"
        :default-time="defaultTime"
      />
    </div>
    <div>{{ value }}</div>
  </div>

  <!-- 页面代码 -->

  <!-- 页面代码 源码 -->
  <dropWrap key="ffs">
    <pre><code class="language-js">{{ httpCode }} </code></pre>
  </dropWrap>
  <!-- 页面代码 源码 -->
</template>
    
  <script lang="ts" setup>
import { ref, onMounted, nextTick } from "vue";
import Prism from "prismjs";
import "../prism.css";

import dropWrap from "../dropWrap.vue";
/* 响应式变量 */
const value1 = ref("2024/02/03");
const value2 = ref("");

const value = ref("");
const defaultTime = ref<[Date, Date]>([new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 23, 59, 59)]);

//变量 htm 用于存放 组件源码 code
let htm = ref<string>(`
    <el-date-picker v-model="value1" type="date" placeholder="Pick a day" :size="size"/>
    
    js代码：const value1 = ref("2024/02/03");

    `);
let httpCode = ref<string>(`
    <el-date-picker v-model="value"  type="daterange" start-placeholder="Start date" end-placeholder="End date" :default-time="defaultTime"/>
    
    js代码：
        const value = ref('')
        const defaultTime = ref<[Date, Date]>([
             new Date(2000, 1, 1, 0, 0, 0),
             new Date(2000, 2, 1, 23, 59, 59),
            ])
    
    `);

/* 
    生命周期
    */
onMounted(() => {
  nextTick(() => {
    Prism.highlightAll();
  });
});
</script>
    <style lang="scss" scoped>
.el-row::v-deep {
  margin-bottom: 20px;
}
</style>
    